<template>
	<div style="display: flex;align-items: center;justify-content: center;">
		<div id="mainb" style="min-width: 130px;height:180px;margin"></div>
		<div style="margin-left: 10px;"> 
			<div style="display: flex ;align-items: center;margin-bottom: 5px;width: 190px;" v-for="(item,index) in guancangmsg" :key="index">
				<div style="width: 15px;height: 8px;margin-right: 5px;" :style="{backgroundColor:color[index]}">
					
				</div>
				{{item.name}}: {{item.value}}
			</div>
			
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name:"tubiaob",
		props: ['guancangmsg'],
		  data(){
			  return{
			  	guancangmsga:{},
				color:['#5ada91','#f9a457','#65a0eb','#f77777','#f177ef']
			  }
		  },
		  watch:{
			 guancangmsg(oldval,newval){
				  this.getmsg()
			  }
		  },
		  created () {
			
		  },
		  mounted(){
			this.getmsg()
		  },
		  methods:{
			   getmsg(){
				   let that =this
				  this.guancangmsga=this.guancangmsg
				  console.log('这是光舱壁',this.guancangmsga)
				  if( this.guancangmsga.length>=0){
					  setTimeout(res=>{
						  that.getbiao()
					  },500)
					  
				  }
				  
			  },
			  getbiao(){
				
				let b=this.guancangmsga
				  console.log('这是a',b)
				var myChart = echarts.init(document.getElementById('mainb'));
				  var option = {
				    title: {
				      text: '',
				      left: 'center',
				      top: 70.5,
				      textStyle:{
				        color:'#1890fe'
				      }
				    },
				    visualMap: {
				      show: false,
				    },
				    series: [
				      {
				        type: 'pie',
				        //环形显示饼状图，实际上显示的是50-80之间的部分
				        //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
				        radius: ['65%', '80%'],
				        center: ['50%', '50%'],
					 legend: {
							orient: 'vertical',
							left: 'right',
							data: ['读者总数', '借阅人数', ]
						},
				        data: [   
				        //itemSyle是单项的背景颜色设置。
				          { value:b[0].num , itemStyle: { color: '#5ada91'}, },
				          { value:b[1].num , itemStyle: { color: '#f9a457' } },
				          { value:b[2].num , itemStyle: { color: '#65a0eb' } },
				          // { value:b[4].num , itemStyle: { color: '#f177ef' } },
				        ],
				        label: {
				          //将视觉引导图关闭
				          show: false,
				        },
				        itemStyle:{
				        	//设置的是每项之间的留白
				          borderWidth:0,
				          borderColor:'#fff'
				        },
				        // 初始化echarts的动画效果
				        animationType: 'scale',
				        animationEasing: 'elasticOut',
				        animationDelay: function (idx) {
				          return Math.random() * 200;
				        }
				      }
				    ]}
				  		
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
			  }
		  },
		
	}
</script>

<style>
</style>